<template>
  <div class="time">
    {{ time }} {{ showWeek ? week : '' }}
    <p>数据更新时间: {{refresh?parseTime(new Date(refresh)):parseTime(now)}}</p> 
  </div>
</template>

<script>
import {
  defineComponent,
  ref,
  computed,
  onBeforeMount,
  onMounted,
  onBeforeUnmount,
} from "vue";

import { useRoute } from "vue-router";
import { parseTime } from "@/utils";
import { ElMessage, ElMessageBox } from "element-plus";

export default defineComponent({
  name: "Title",
  props: {
    showWeek: {
      type: Boolean,
      default: true
    },
    refresh: {
      type: Number,
    }
  },
  setup(props, { emit }) {
    const timer = ref(null);

    // 时间戳
    const time = ref(null);
    const week = ref(null)
    const now = ref(new Date())
    const getTime = () => {
      const today = new Date()
      const weekCn = ['日', '一', '二', '三', '四', '五', '六']
      time.value = parseTime(today, "{y}-{m}-{d} {h}:{i}:{s}");
      week.value = '星期' + weekCn[today.getDay()]
    };
    onBeforeMount(() => {
      clearInterval(timer.value)
      timer.value = null;
    });
    getTime();
    onMounted(() => {
      timer.value = setInterval(() => {
        getTime();
      }, 1000);
    });
    onBeforeUnmount(() => {
      clearInterval(timer.value)
      timer.value = null;
    });
    return {
      time,
      week,
      parseTime,
      now
    };
  },
});
</script>

<style lang="scss" scoped>
.time {
  font-size: 16px;
  font-weight: 600;
  color: #85D0EB;
  padding-top: 20px;
  width: 280px;
  p {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
  }
}
</style>